<template>
  <div>
    <el-card class="btns">
      <el-button size="mini" type="primary" @click="addItem">应用</el-button>
    </el-card>
    <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm" size="mini">
      <el-row>
        <el-col :span="8">
          <my-form-item label="客户编号">
            <el-input v-model="ruleForm.entNo" disabled></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="客户名称" prop="entName">
            <el-input v-model="ruleForm.entName"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="曾用名">
            <el-input v-model="ruleForm.formerName"></el-input>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="基本开户许可证">
            <el-input v-model="ruleForm.openAccountlicence"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="基本开户行">
            <el-input v-model="ruleForm.openAccountbank"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="项目来源" prop="projectSources">
            <el-select v-model="ruleForm.projectSources" placeholder="请选择项目来源" style="width: 100%;">
              <el-option label="项目经理营销" value="0"></el-option>
              <el-option label="存量客户" value="1"></el-option>
              <el-option label="银行推荐" value="2"></el-option>
              <el-option label="合作单位推荐" value="3"></el-option>
              <el-option label="其他" value="4"></el-option>
              <el-option label="相关部门及区局推荐" value="5"></el-option>
            </el-select>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="区域(注册地)" prop="area">
            <el-cascader
              v-model="ruleForm.areaList"
              :options="areas"
              :props="{ checkStrictly: true,value:'label',label:'label' }"
              clearable
              filterable
            ></el-cascader>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="所属行业" prop="industry">
            <el-select v-model="ruleForm.industry" placeholder="请选择活动区域" style="width: 100%;">
              <el-option label="采矿业" value="0"></el-option>
              <el-option label="制造业" value="1"></el-option>
            </el-select>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="所属行业工信部" prop="industryPro">
            <el-select v-model="ruleForm.industryPro" placeholder="请选择活动区域" style="width: 100%;">
              <el-option label="农,林，木，渔业" value="0"></el-option>
              <el-option label="工业" value="1"></el-option>
              <el-option label="建筑业" value="2"></el-option>
            </el-select>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="通讯地址">
            <el-input v-model="ruleForm.mailAddress"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="企业联系电话">
            <el-input v-model="ruleForm.entPhone"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="电子信箱">
            <el-input v-model="ruleForm.entEmail"></el-input>
          </my-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-card class="btns">
      <el-button size="mini" type="primary" @click="addField">保存</el-button>
    </el-card>
<el-table  :data="tableData"  style="width: 100%" border  size="small"> 
  <el-table-column label="字段编码">
     <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" size="mini">
          <my-form-item prop="fieldCode">
            <el-input disabled="disabled" v-show="true" v-model="scope.row.fieldCode" placeholder="请输入字段名"/>
          </my-form-item>
        </el-form>
     </template>  
  </el-table-column>
  <el-table-column label="字段名">
     <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" size="mini">
          <my-form-item prop="fieldName">
            <el-input v-show="true" v-model="scope.row.fieldName" placeholder="请输入字段名"/>
          </my-form-item>
        </el-form>
     </template>  
  </el-table-column>
  <el-table-column label="字段类型">
     <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" size="mini">
          <my-form-item prop="fieldType">
            <el-select v-model="scope.row.fieldType">
              <el-option
                v-for="item in option"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </my-form-item>
        </el-form>
     </template>  
  </el-table-column>
<el-table-column label="是否可用">
     <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" size="mini">
          <my-form-item prop="isAvailable">
            <el-switch
              v-model="scope.row.isAvailable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              validate-event=true
              @click.native="set(scope.$index, scope.row)">
            </el-switch>
          </my-form-item>
        </el-form>
     </template>  
  </el-table-column>
  <el-table-column label="排序">
     <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" size="mini">
          <my-form-item prop="sortNum">
            <el-input v-show="true" v-model="scope.row.sortNum" placeholder="请输入排序数字"/>
          </my-form-item>
        </el-form>
     </template>  
  </el-table-column>
</el-table>   
  </div>
</template>

<script>
import { reject } from "q";
export default {
  // props:{
  //   type:{
  //     type:String,
  //     default:"add"
  //   }
  // },
  data() {
    return {
      downloadLoading:false,
      ruleForm: {
        entNo: "",
        entName: "",
        formerName: "",
        openAccountlicence: "",
        openAccountbank: "",
        projectSources: "",
        areaList: [],
        area: "",
        industry: "",
        industryPro: "",
        mailAddress: "",
        entPhone: "",
        entEmail: ""
      },
      valid:true,//记录表单验证，控制提交
      tableName:"biz_ent_base",
      option:[
        {name:"字符串",code:'1'},
        {name:"数字",code:'2'},
        {name:"大文本",code:'3'}
        ],
      tableData:[],
      tableHead:[
        {
          column_name: "fieldCode",column_comment:"字段编码",align:"center"
        },
        {
          column_name: "fieldName",column_comment:"字段名",align:"center"
        },
        {
          column_name: "fieldType",column_comment:"字段类型",align:"center"
        },
        
        {
          column_name: "isAvailable",column_comment:"是否可用",align:"center"
        },
        {
          column_name: "sortNum",column_comment:"排序",align:"center"
        },
      ],
      rules: {
        entName: [
          { required: true, message: "请输入客户名称", trigger: "blur" }
        ],
        projectSources: [
          { required: true, message: "请选择项目来源", trigger: "change" }
        ],
        area: [{ required: true, message: "请选择区域", trigger: "change" }],
        industry: [
          { required: true, message: "请选择所属行业", trigger: "change" }
        ],
        industryPro: [
          { required: true, message: "请选择所属行业工信部", trigger: "change" }
        ],
        sortNum:[
          { required: true, validator: this.isNumber, trigger: "change" }
          ]
      },
      status: false,
      areas: []
    };
  },
  mounted() {
    this.getAreaList();
    this.getReservedFieldList();
  },
  methods: {
    /**
     * 数字校验
     */
    isNumber(rule, value, callback,row) {
      // if (value === '') {
      //   return callback();
      // }  
      //这是用来判断如果不是必须输入的，则直接跳出
      const r = /^\+?[0-9]*$/; // 正整数
      // 如果判断不符合正则，则不是正整数不能提交
      
      if (!r.test(value)||value === '') {
        this.valid=false;
        return callback(new Error('请填入数字数'));
      } else {
        this.valid=true;
        return callback();
      }
    },
    /**
     * 添加字段保存
     */
    addField() {
      if(this.valid){
            this.downloadLoading = true;
            this.$api.formPost('/api/biz/reservedField/save',{
              list:JSON.stringify(this.tableData)
            })
          .then(res => {
            this.downloadLoading = false;
              if(res.retHead.code=="0000000"){
                this.$message({ type:'success',message: "执行成功" });
                this.getReservedFieldList();
              }else{
                      this.$message({
                          type: 'error',
                          message: res.retHead.message
                      });
                  }
          })
      }else{
        this.$message({
                message: "请注意验证信息！",
                type: "error"
              });
              return false;
      }
    },
    /**
     * 切换switch事件
     */
    set(index,row){
        if(row.isAvailable=='1'){
          if(!row.fieldName){
             if(!row.fieldType){
                this.$message({
                message: "状态可用时字段名和字段类型不能为空！",
                type: "error"
              });
              row.isAvailable='0';
             }else{
            this.$message({
                message: "状态可用时字段名不能为空！",
                type: "error"
              });
              row.isAvailable='0';
             }
          }else{
             if(!row.fieldType){
            this.$message({
                message: "状态可用时请选择字段类型！",
                type: "error"
              });
              row.isAvailable='0';
          }
          }
        }
    },
    /**
     * 初始化获取COL1~COL10
     */
    getReservedFieldList(){
      this.downloadLoading = true;
      this.$api.formPost('/api/biz/reservedField/doGetList',{tableName:this.tableName})
    .then(res => {
        if(res.retHead.code=="0000000"){
          this.downloadLoading = false;
          this.tableData = res.retBody.list;
        }else{
                this.$message({
                    type: 'error',
                    message: res.retHead.message
                });
            }
    })
    },
   getData(entId){
      this.$api.formPost( '/api/biz/entBase/doGetById',{
        id:entId
      }).then(res => {
        console.log(res)
            if(res.retHead.code=="0000000"){
                this.ruleForm = res.retBody;
            }else{
                this.$message({
                    type: 'error',
                    message: res.retHead.message
                });
            }
        });
    },
    doSave(id,path,name) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.$api
          .post("/api/biz/entBase/doSubmit", { entBase: that.ruleForm ,applicationPath:path,componentName:name,entId:id})
          .then(res => {
            if (res.retHead.code == "0000000") {
              // that.$message.success(res.retHead.message);
              resolve(res.retBody);
            } else {
              that.$message.error(res.retHead.message);
            }
          });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {});
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAreaList() {
      this.$api.formPost("/api/auth/sysArea/doGetSysAreaVOList").then(res => {
        if (res.retHead.code == "0000000") {
          this.areas = res.retBody;
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>